<template>
<div class="header">
    <div class="header-left">
    <span class="iconfont back-icon">&#xe624;</span>
    </div>
    <div class="header-input">
    <span class="iconfont search">&#xe62a;</span>
    输入城市/景点/游玩主体
    </div>
    <router-link to="/city">
    <div class="header-right">
    {{this.currentCity}}
    <span class="iconfont down-arrow">&#xe64a;</span>
    </div>
    </router-link>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'HomeHeader',
  computed: {
    ...mapState({
      currentCity: 'city'
    })
  }
}
</script>
<style lang="scss" scoped>
@import '~styles/variables.scss';
  .header{
      height: $headerHeight;
      background: $baseColor;
      display: flex;
      .header-left{
          height: $headerHeight;
          line-height: $headerHeight;
          text-align: center;
          margin-left: 0.1rem;
          .back-icon{
              font-size: 0.4rem;
              color: #fff;
              font-weight: bold;
          }
      }
      .header-input{
          flex: 1;
          background: #fff;
          border-radius: 0.1rem;
          height: 0.64rem;
          line-height: 0.64rem;
          padding-left: 0.2rem;
          box-sizing: border-box;
          margin-top: 0.1rem;
          margin-left: 0.2rem;
          color: #ccc;
          .search{
              font-size: 0.45rem;
              vertical-align: middle;
          }
      }
      .header-right{
          min-width: 1.08rem;
          height: 0.66rem;
          padding:  0.1rem;
          line-height: 0.66rem;
          text-align: center;
          color: #fff;
          .down-arrow{
              font-size: 0.3rem;
              margin-left: -0.035rem;
          }
      }
  }
</style>
